<template>
	<div class="app-table">
		<div class="label" v-if="props.routerParams.operateType !== 'view'">
			<span style="color: red" v-if="props.routerParams.operateType === 'add'">*</span>评审应用
		</div>
		<div class="table">
			<el-form :model="form" ref="formRef">
				<el-button class="mb-5" v-if="props.routerParams.operateType === 'add'" type="primary" @click="add" icon="Plus">新增评审应用</el-button>
				<el-table
					:cell-style="{ textAlign: 'center' }"
					:header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
					row-key="uuid"
					border
					:data="form.tableData"
					:row-class-name="tableRowClassName"
					style="width: 100%"
				>
					<el-table-column prop="appName" label="数字化应用名称">
						<template #default="{ row }">
							<el-form-item
								:prop="`tableData.${row.index}.appName`"
								:rules="[{ required: true, message: '请输入数字化应用名称' }]"
								placeholder="请输入数字化应用名称"
							>
								<el-input v-show="row.disabled === false" style="width: auto; height: auto" v-model="row['appName']"></el-input>
								<span v-show="row.disabled === true"> {{ row['appName'] }}</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="belongField" label="所属领域">
						<template #default="{ row }">
							<el-form-item
								:prop="`tableData.${row.index}.belongField`"
								:rules="[{ required: true, message: '请输入所属领域' }]"
								placeholder="请输入所属领域"
							>
								<el-input v-show="row.disabled === false" style="width: auto" v-model="row['belongField']"></el-input>
								<span v-show="row.disabled === true"> {{ row['belongField'] }}</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="responsibleDept" label="责任部门">
						<template #default="{ row }">
							<el-form-item
								:prop="`tableData.${row.index}.responsibleDept`"
								:rules="[{ required: true, message: '请输入责任部门' }]"
								placeholder="请输入责任部门"
							>
								<el-input v-show="row.disabled === false" style="width: auto" v-model="row['responsibleDept']"></el-input>
								<span v-show="row.disabled === true"> {{ row['responsibleDept'] }}</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="countyLeadDept" label="市级牵头部门">
						<template #default="{ row }">
							<el-form-item
								:prop="`tableData.${row.index}.countyLeadDept`"
								:rules="[{ required: true, message: '请输入市级牵头部门' }]"
								placeholder="请输入市级牵头部门"
							>
								<el-input v-show="row.disabled === false" style="width: auto" v-model="row['countyLeadDept']"></el-input>
								<span v-show="row.disabled === true"> {{ row['countyLeadDept'] }}</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="designUnit" label="设计单位">
						<template #default="{ row }">
							<el-form-item
								:prop="`tableData.${row.index}.designUnit`"
								:rules="[{ required: true, message: '请输入设计单位' }]"
								placeholder="请输入设计单位"
							>
								<el-input v-show="row.disabled === false" style="width: auto" v-model="row['designUnit']"></el-input>
								<span v-show="row.disabled === true"> {{ row['designUnit'] }}</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="yearBudget" label="年度预算(万元）">
						<template #default="{ row }">
							<el-form-item
								:prop="`tableData.${row.index}.yearBudget`"
								:rules="[
									{ required: true, message: '请输入金额' },
									{
										pattern: /^(0|[1-9]\d{0,5})(\.(?!(0$|.*0$)\d*)\d{1,6})?$/,
										message: '请输入正确的金额',
									},
								]"
								placeholder="请输入金额"
							>
								<el-input v-show="row.disabled === false" style="width: auto" maxLength="15" v-model="row['yearBudget']" />
								<span v-show="row.disabled === true"> {{ row['yearBudget'] }}</span>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="130" v-if="props.routerParams.operateType === 'add'">
						<template #default="{ row }">
							<el-button v-if="row.disabled === false" link type="primary" @click="handleDisabled(row.uuid, true)"> 确定 </el-button>
							<el-button v-else link type="primary" @click="handleDisabled(row.uuid, false)"> 编辑 </el-button>
							<el-button link type="danger" @click="handleRemove(row.uuid)"> 删除 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
		</div>
	</div>
</template>
<script setup lang="ts">
import { getUUId } from '/@/utils/hyFunc';
import { ElMessage } from 'element-plus';

const form: any = ref({
	tableData: [],
});
const props = defineProps({
	routerParams: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
const formRef = ref();
const add = (data?: any) => {
	const uuid = getUUId();
	form.value.tableData.push({
		uuid: uuid,
		appName: data.appName || '',
		belongField: data.belongField || '',
		responsibleDept: data.responsibleDept || '',
		countyLeadDept: data.countyLeadDept || undefined,
		designUnit: data.designUnit || '',
		yearBudget: data.yearBudget || '',
		disabled: data.disabled || false,
	});
};
//设置不可操作
const handleDisabled = (uuid: string, disabled: boolean) => {
	form.value.tableData = form.value.tableData.map((item: any) => {
		if (item.uuid === uuid) item.disabled = disabled;
		return item;
	});
};
//删除成本
const handleRemove = (uuid: string) => {
	const removeList = form.value.tableData.filter((item: any) => item.uuid !== uuid);
	form.value.tableData = removeList;
};
//把每一行的索引放进row
const tableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
	row.index = rowIndex;
};
//必填校验
const check = async () => {
	return formRef.value.validate((valid: boolean) => {
		if (!valid) {
			setTimeout(() => {
				const el = document.querySelectorAll('.el-form-item__error')[0];
				el.scrollIntoView({ block: 'center', behavior: 'smooth' });
			}, 100);
			ElMessage.error('表单中有必填项未填写，请检查并补全');
		}
		return valid;
	});
};
defineExpose({ check, add, form });
</script>
<style scoped lang="scss">
.app-table {
	width: 100%;
	display: flex;
	justify-content: flex-start;

	.label {
		width: 120px;
		text-align: right;
		padding-right: 10px;
	}
	.table {
		width: calc(100% - 140px);
		.button {
			margin-bottom: 20px;
		}
	}
	:deep(.el-form-item__content) {
		margin-bottom: 24px;
	}
}
</style>
